<template>
  <div class="help-center">
    <!-- 背景动画 -->
    <div class="animated-bg">
      <div class="gradient-layer"></div>
      <div class="pattern-overlay"></div>
    </div>

    <!-- 聊天界面 -->
    <div class="chat-container">
      <!-- 左侧快捷问题面板 -->
      <div class="quick-questions">
        <div class="panel-header">
          <h2>常见问题</h2>
          <p>点击问题快速获取答案</p>
        </div>
        
        <div class="questions-list">
          <div 
            v-for="(category, index) in questionCategories" 
            :key="index"
            class="question-category"
          >
            <div 
              class="category-header"
              @click="category.isExpanded = !category.isExpanded"
            >
              <i :class="category.icon"></i>
              <span>{{ category.name }}</span>
              <i 
                class="fas fa-chevron-down"
                :class="{ 'expanded': category.isExpanded }"
              ></i>
            </div>
            <transition name="expand">
              <div 
                v-show="category.isExpanded"
                class="category-questions"
              >
                <div 
                  v-for="(question, qIndex) in category.questions"
                  :key="qIndex"
                  class="quick-question"
                  @click="sendQuickQuestion(question)"
                >
                  {{ question.title }}
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- 右侧聊天区域 -->
      <div class="chat-main">
        <div class="chat-header">
          <div class="bot-info">
            <div class="bot-avatar">
              <img src="https://api.dicebear.com/7.x/bottts/svg?seed=bot" alt="AI助手">
              <span class="status-dot"></span>
            </div>
            <div class="bot-details">
              <h3>AI智能助手</h3>
              <span class="status">在线</span>
            </div>
          </div>
          <div class="header-actions">
            <button class="action-btn" @click="clearChat">
              <i class="fas fa-trash-alt"></i>
              清空对话
            </button>
          </div>
        </div>

        <div class="chat-messages" ref="messageContainer">
          <!-- 欢迎消息 -->
          <div class="welcome-message">
            <h2>欢迎来到帮助中心 👋</h2>
            <p>我是您的智能助手，很高兴为您服务！</p>
            <p>您可以：</p>
            <ul>
              <li>直接输入问题</li>
              <li>点击左侧常见问题</li>
              <li>查看历史对话记录</li>
            </ul>
          </div>

          <!-- 消息列表 -->
          <div 
            v-for="(message, index) in messages"
            :key="index"
            class="message"
            :class="message.type"
          >
            <template v-if="message.type === 'bot'">
              <div class="bot-avatar">
                <img src="https://api.dicebear.com/7.x/bottts/svg?seed=bot" alt="AI助手">
              </div>
            </template>
            
            <div class="message-content">
              <div class="message-bubble">
                <template v-if="message.type === 'bot' && message.isTyping">
                  <div class="typing-indicator">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </template>
                <template v-else>
                  <div v-html="formatMessage(message.content)"></div>
                </template>
              </div>
              <div class="message-time">{{ formatTime(message.timestamp) }}</div>
            </div>

            <template v-if="message.type === 'user'">
              <div class="user-avatar">
                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=user" alt="用户">
              </div>
            </template>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="chat-input">
          <div class="input-wrapper">
            <textarea
              v-model="userInput"
              placeholder="输入您的问题..."
              @keyup.enter.prevent="sendMessage"
              ref="inputArea"
            ></textarea>
            <div class="input-actions">
              <button 
                class="send-btn"
                :disabled="!userInput.trim()"
                @click="sendMessage"
              >
                <i class="fas fa-paper-plane"></i>
              </button>
            </div>
          </div>
          <div class="input-suggestions" v-if="suggestions.length > 0">
            <div 
              v-for="(suggestion, index) in suggestions"
              :key="index"
              class="suggestion"
              @click="selectSuggestion(suggestion)"
            >
              {{ suggestion }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelpCenter',
  
  data() {
    return {
      messages: [],
      userInput: '',
      suggestions: [],
      questionCategories: [
        {
          name: '账号相关',
          icon: 'fas fa-user-circle',
          isExpanded: false,
          questions: [
            {
              title: '如何注册账号？',
              answer: '注册账号非常简单：\n1. 点击右上角"创作者入驻"\n2. 填写基本信息\n3. 验证邮箱\n4. 设置密码即可'
            },
            {
              title: '忘记密码怎么办？',
              answer: '您可以通过以下步骤重置密码：\n1. 点击登录页面的"忘记密码"\n2. 输入注册邮箱\n3. 获取验证码\n4. 设置新密码'
            }
          ]
        },
        {
          name: 'API使用',
          icon: 'fas fa-code',
          isExpanded: false,
          questions: [
            {
              title: '如何调用API？',
              answer: '调用API的步骤：\n1. 获取API密钥\n2. 查看API文档\n3. 按文档说明发起请求\n4. 处理返回结果'
            },
            {
              title: 'API有调用限制吗？',
              answer: '是的，API调用有以下限制：\n- 免费用户：1000次/天\n- 普通会员：10000次/天\n- 高级会员：不限制'
            }
          ]
        },
        {
          name: '计费说明',
          icon: 'fas fa-credit-card',
          isExpanded: false,
          questions: [
            {
              title: '如何购买会员？',
              answer: '购买会员步骤：\n1. 登录账号\n2. 进入个人中心\n3. 选择会员套餐\n4. 完成支付即可'
            },
            {
              title: '支持哪些支付方式？',
              answer: '我们支持以下支付方式：\n- 支付宝\n- 微信支付\n- PayPal\n- 银行卡'
            }
          ]
        }
      ]
    }
  },

  methods: {
    sendMessage() {
      if (!this.userInput.trim()) return;
      
      // 添加用户消息
      this.messages.push({
        type: 'user',
        content: this.userInput,
        timestamp: new Date()
      });

      // 显示机器人正在输入
      this.messages.push({
        type: 'bot',
        isTyping: true,
        timestamp: new Date()
      });

      // 模拟API响应延迟
      setTimeout(() => {
        // 移除输入中状态
        this.messages.pop();
        
        // 添加机器人回复
        this.messages.push({
          type: 'bot',
          content: this.generateResponse(this.userInput),
          timestamp: new Date()
        });

        this.scrollToBottom();
      }, 1000);

      this.userInput = '';
      this.suggestions = [];
    },

    sendQuickQuestion(question) {
      this.messages.push({
        type: 'user',
        content: question.title,
        timestamp: new Date()
      });

      setTimeout(() => {
        this.messages.push({
          type: 'bot',
          content: question.answer,
          timestamp: new Date()
        });

        this.scrollToBottom();
      }, 500);
    },

    generateResponse(input) {
      // 这里可以接入实际的AI服务
      return `感谢您的提问。对于"${input}"，我的建议是...`;
    },

    formatMessage(content) {
      // 将换行符转换为HTML换行
      return content.replace(/\n/g, '<br>');
    },

    formatTime(timestamp) {
      return new Date(timestamp).toLocaleTimeString();
    },

    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messageContainer;
        container.scrollTop = container.scrollHeight;
      });
    },

    clearChat() {
      this.messages = [];
    },

    selectSuggestion(suggestion) {
      this.userInput = suggestion;
      this.suggestions = [];
      this.$refs.inputArea.focus();
    }
  },

  mounted() {
    // 设置页面标题
    document.title = 'E特尔诺-帮助中心';
  }
}
</script>

<style scoped>
.help-center {
  min-height: 100vh;
  background: #f0f2f5;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* 背景动画 */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.gradient-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  opacity: 0.8;
}

.pattern-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  animation: patternMove 20s linear infinite;
}

/* 聊天容器 */
.chat-container {
  max-width: 1400px;
  height: calc(100vh - 4rem);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
}

/* 快捷问题面板 */
.quick-questions {
  width: 300px;
  background: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.panel-header h2 {
  font-size: 1.5rem;
  color: #1a237e;
  margin-bottom: 0.5rem;
}

.panel-header p {
  color: #666;
  font-size: 0.9rem;
}

.questions-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.question-category {
  margin-bottom: 1rem;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-header:hover {
  background: rgba(0, 0, 0, 0.08);
}

.category-header i {
  color: #1a237e;
}

.category-header .fa-chevron-down {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.category-header .fa-chevron-down.expanded {
  transform: rotate(180deg);
}

.category-questions {
  padding: 0.5rem 0 0.5rem 2rem;
}

.quick-question {
  padding: 0.75rem;
  color: #666;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.quick-question:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a237e;
}

/* 聊天主区域 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 1rem 2rem;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bot-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bot-avatar {
  position: relative;
  width: 48px;
  height: 48px;
}

.bot-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #4caf50;
  border: 2px solid white;
  border-radius: 50%;
}

.bot-details h3 {
  color: #1a237e;
  margin-bottom: 0.25rem;
}

.status {
  color: #4caf50;
  font-size: 0.9rem;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.action-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1a237e;
}

/* 消息区域 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

.welcome-message {
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.welcome-message h2 {
  color: #1a237e;
  margin-bottom: 1rem;
}

.welcome-message ul {
  text-align: left;
  max-width: 300px;
  margin: 1rem auto;
}

.welcome-message li {
  margin: 0.5rem 0;
  color: #666;
}

.message {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.message.user {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 70%;
}

.message.user .message-content {
  align-items: flex-end;
}

.message-bubble {
  padding: 1rem;
  border-radius: 12px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message.user .message-bubble {
  background: #1a237e;
  color: white;
}

.message-time {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

/* 输入区域 */
.chat-input {
  padding: 1.5rem;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.input-wrapper {
  display: flex;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 1rem;
}

textarea {
  flex: 1;
  border: none;
  background: none;
  resize: none;
  height: 40px;
  line-height: 20px;
  padding: 10px 0;
  font-size: 1rem;
}

textarea:focus {
  outline: none;
}

.send-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #1a237e;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-btn:hover {
  transform: scale(1.1);
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* 输入建议 */
.input-suggestions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.suggestion {
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.suggestion:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* 打字动画 */
.typing-indicator {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #666;
  border-radius: 50%;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0.1s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 动画 */
@keyframes patternMove {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 100% 100%, 20px 20px, 20px 20px;
  }
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  height: 0;
  opacity: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .help-center {
    padding: 1rem;
  }

  .chat-container {
    flex-direction: column;
    height: calc(100vh - 2rem);
  }

  .quick-questions {
    width: 100%;
    height: 200px;
  }

  .questions-list {
    padding: 0.5rem;
  }
}
</style> 